<template>
    <div class="report-nav">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 容器  显示图表 -->
        <div ref="main" id="box">

        </div>
    </div>
</template>

<script setup>
//引入方式
import { init } from 'echarts'
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue';
// import { getReportList } from "@/api/report"
let myChart = null
const mainResize = () => {
    myChart.resize();
}
const { proxy } = getCurrentInstance()
// console.log("ctx------", ctx);
// console.log("ctx------", ctx.msg);
// console.log("proxy------", proxy);
//图标容器的ref
const main = ref(null)
// **************** 组件已经挂载
onMounted(async () => {
    //获取图表 容器 对象 vue通过ref   或者原生js通过 id
    myChart = init(main.value)
    let { meta, data } = await proxy.$http.get("/reports/type/1");
    if (meta.status != 200) return proxy.$ElMessage.error(meta.msg);

    //图表数据
    myChart.setOption(data);
    window.addEventListener('resize', mainResize);


})
onUnmounted(() => {
    window.removeEventListener('resize', mainResize);
})
</script>

<style lang="scss" scoped>
.report-nav {
    position: relative;
    width: 100%;
    // height: 100%;
    overflow: auto;

    #box {
        position: absolute;
        width: 100%;
        height: 95%;
        padding: 20px;
        box-sizing: border-box;
        // margin-top: 10px;
        background-color: white;
        overflow: hidden;
    }
}
</style>